<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随想录</title>
    <style>
        /** { margin: 0; padding: 0; list-style: none; box-sizing: border-box; -webkit-appearance: none; }*/
        body {
            background: #212f3d;
            max-width: 1100px;
            margin: auto;
            padding: 6px;
            /*border: 1px solid lightgrey;*/
        }

        .liked path {
            fill: red; /* 实心的颜色 */
        }

        .imgs {
            display: block;
            margin: 0 auto;
        }

        #like_count {
            font-size: 22px;
            color: whitesmoke;
        }

        /*    大屏幕     */
        @media screen and (min-width: 769px) {
            .imgs {
                width: 50%;
            }
        }

        /*    小屏幕     */
        @media screen and (max-width: 768px) {
            .imgs {
                width: 80%;
            }
        }


    </style>
</head>
<body>
<div th:replace="~{common-page/header.html :: myheader}"></div>

<!--<h1 th:text="${qqSpaceDTO.id} "></h1>-->

<h1  style="color: lightgray; " th:text="${qqSpaceDTO.description} "></h1>
<div th:each="img:${qqSpaceDTO.imgPaths}">
    <img th:src="'/images/QQ-space/'+${img}" alt="qq-space-image" class="imgs"> <br><br>
</div>

<!--<h1 th:text="${isLike}"></h1>-->

<!--   点赞按钮    -->
<div>
    <button th:id="'likeButton'+${qqSpaceDTO.id}" th:onclick="'like_this(' + ${qqSpaceDTO.id} + ')'" style="background:none; border: none;  display: flex; align-items: center; margin: auto; ">
        <svg  id="SVG-ICON" width="33" height="33" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"   th:class="${isLike} ? 'liked' : ''"    >
            <path d="M27.6002 18.5998V11.3998C27.6002 8.41743 25.1826 5.99977 22.2002 5.99977L15.0002 22.1998V41.9998H35.9162C37.7113 42.0201 39.2471 40.7147 39.5162 38.9398L42.0002 22.7398C42.1587 21.6955 41.8506 20.6343 41.1576 19.8373C40.4645 19.0403 39.4564 18.5878 38.4002 18.5998H27.6002Z" stroke="#dfcfcf" stroke-width="4" stroke-linejoin="round"/>
            <path d="M15 22.0001H10.194C8.08532 21.9628 6.2827 23.7095 6 25.7994V38.3994C6.2827 40.4894 8.08532 42.0367 10.194 41.9994H15V22.0001Z" fill="none" stroke="#dfcfcf" stroke-width="4" stroke-linejoin="round"/>
        </svg>
        <span th:text="${qqSpaceDTO.like_count}" id="like_count" ></span>
    </button>
</div>

<br><br><br><br><br><br><br><br>

</body>
<script th:inline="javascript">

    let all_data = [[${qqSpaceDTO}]];
    console.log(all_data);

    function like_this(id) {
        // alert(id)
        let api_url = "/qq-space-like/" + id;
        fetch(api_url, {
            method: 'GET',
            headers: {'Content-Type': 'application/json',},
        })
            // .then(response => response.json())  // 解析响应为 json, 无需再 JSON.parse() 解析
            .then(response => response.text())  // 解析响应为 文本
            .then(data => {
                console.log(data)
                if(data === "请先登录"){
                    alert("亲爱的用户, 需要先登录哦~")
                    return false;
                }
                let svg = document.getElementById("SVG-ICON");
                if (svg.classList.contains("liked")) {
                    console.log(svg.classList)
                    svg.classList.remove("liked")
                } else {
                    svg.classList.add("liked");
                }
                document.getElementById("like_count").innerText = data;
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }

</script>
</html>